<template>
  <div class="message-item">
    <div class="message-layout" :class="messagePosition">
      <div class="col-avatar" v-if="showAvatar">
        <!-- 头像 -->
        <Avatar :src="avatar" :type="currentConversation.type === TIM.TYPES.CONV_SYSTEM ?  TIM.TYPES.CONV_SYSTEM : TIM.TYPES.CONV_C2C" :message="message"/>
      </div>
      <div class="col-content">
        <MessageHeader :message="message" v-if="showAvatar"/>
        <div class="content-wrapper">
          <MessageStatusIcon v-if="isMine && showAvatar" :message="message" />
          <TextElement v-if="message.type === TIM.TYPES.MSG_TEXT" :isMine="isMine" :message="message" />
          <GroupSystemNoticeElement  v-else-if="message.type === TIM.TYPES.MSG_GRP_SYS_NOTICE" :message="message" />
          <GroupTipElement v-else-if="message.type===TIM.TYPES.MSG_GRP_TIP" :message="message" />
          <ImageElement v-else-if="message.type === TIM.TYPES.MSG_IMAGE" :isMine="isMine" :message="message" />
          <FileElement v-else-if="message.type === TIM.TYPES.MSG_FILE" :isMine="isMine" :message="message" />
          <VideoElement v-else-if="message.type === TIM.TYPES.MSG_VIDEO" :isMine="isMine" :message="message" />
          <CustomElement v-else-if="message.type===TIM.TYPES.MSG_CUSTOM" :isMine="isMine" :message="message" />
          <span v-else>暂未支持的消息类型：{{message.type}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MessageHeader from './MessageHeader.vue';
import MessageStatusIcon from './MessageStatusIcon.vue';
import TextElement from './message-elements/TextElement.vue';
import GroupSystemNoticeElement from './message-elements/GroupSystemNoticeElement.vue';
import GroupTipElement from './message-elements/GroupTipElement.vue';
import ImageElement from './message-elements/ImageElement.vue';
import FileElement from './message-elements/FileElement.vue';
import VideoElement from './message-elements/VideoElement.vue';
import CustomElement from './message-elements/CustomElement';

export default {
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  components:{
    MessageHeader,
    MessageStatusIcon,
    TextElement,
    GroupSystemNoticeElement,
    GroupTipElement,
    ImageElement,
    FileElement,
    VideoElement,
    CustomElement
  },
  computed: {
    ...mapState({
      currentConversation: state => state.conversation.currentConversation,
      currentUserProfile: state => state.user.currentUserProfile
    }),
    showAvatar() {
      if (this.message.type === this.TIM.TYPES.MSG_GRP_TIP || this.message.type === this.TIM.TYPES.MSG_CUSTOM) {
        return false;
      }
      return true;
    },
    messagePosition(){
      if (this.message.type === this.TIM.TYPES.MSG_GRP_TIP || this.message.type === this.TIM.TYPES.MSG_CUSTOM) {
        return 'position-center'
      }
      if (this.isMine) {
        return 'position-right';
      } else {
        return 'position-left';
      }
    },
    isMine() {
      return this.message.flow === 'out';
    },
    avatar() {
      if (this.currentConversation.type === this.TIM.TYPES.CONV_C2C) {
        return this.isMine ? this.currentUserProfile.avatar : this.currentConversation.userProfile.avatar;
      } else if (this.currentConversation.type === this.TIM.TYPES.CONV_GROUP) {
        return this.isMine ? this.currentUserProfile.avatar : this.message.avatar;
      } else {
        return '';
      }
    },
  }
}
</script>

<style scoped>
.message-item {
  overflow: hidden;
  margin: 20px 0;
}

.message-item .content-wrapper {
  overflow: hidden;
  display: flex;
  align-items: center;
}

.content-wrapper span{
  padding: 0 4px;
}

.message-layout {
  display: flex;
}

.message-layout .col-content {
  display: flex;
  flex-direction: column;
}

.position-left .col-content{
  align-items: flex-start;
}

.position-right {
  flex-direction: row-reverse;
}

.position-right .col-content{
  align-items: flex-end;
}

.position-center {
  justify-content: center;
}

.col-avatar{
  margin: auto 5px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
</style>